<template>
	<view class="myNavBar">

		<view class="myNavBarItem">
			<image src="../../static/icons/navbar/homeIcon.png" style="width: 100%;height: 100%;" mode="center"></image>
		</view>

		<view class="myNavBarItem" @click="goFavorite()">
			<image src="../../static/icons/navbar/heartIcon.png" style="width: 100%;height: 100%;" mode="center">
			</image>
		</view>

		<view class="myNavBarItem" @click="goMyProfile()">
			<image src="../../static/icons/navbar/myIcon.png" style="width: 100%;height: 100%;" mode="center"></image>
		</view>

		<view class="myNavBarItem" @click="goBasket()">
			<image src="../../static/icons/navbar/cartIcon.png" style="width: 100%;height: 100%;" mode="center"></image>
		</view>
	</view>
</template>

<script setup>
	// 跳转购物车
	const goBasket = () => {
		uni.navigateTo({
			url: '/pages/basket/basket'
		})
	}

	// 跳转我的喜爱
	const goFavorite = () => {
		uni.navigateTo({
			url: '/pages/favorite/favorite'
		})
	}

	// 跳转个人信息
	const goMyProfile = () => {
		uni.navigateTo({
			url: "/pages/myProfile/myProfile"
		})
	}
</script>

<style lang="scss">
	.myNavBar {
		position: fixed;
		width: 100%;
		bottom: 100rpx;
		height: 50rpx;
		// background-color: beige;
		padding: 0 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.myNavBarItem {
			width: 48rpx;
			height: 48rpx;
			// background-color: black;
		}
	}
</style>